<template>
  <!-- 公共底部 -->
  <div>
    <div class="footerPc">
      <div class="left-box">
        <div class="title-box">
          <div class="name">{{ bottom?.sunflowerpharmaceutical?.name }}</div>
          <div class="website">{{ bottom?.groupofficialwebsite?.name }}</div>
        </div>
        <div class="en">{{ bottom?.official?.name }}</div>
        <div class="email-box" v-if="bottom?.copyright">
          <!-- <div class="email">Copyright@right kuihuayaoye.com</div> -->
          <div class="release" @click="goWeb(bottom?.copyright?.url)">
            {{ bottom?.copyright?.name }}
          </div>
        </div>
        <div
          class="number"
          v-if="bottom?.Internetdruginformation"
          @click="goWeb(bottom?.Internetdruginformation?.url)"
        >
          {{ bottom?.Internetdruginformation?.name }}
        </div>
        <div
          class="icp"
          v-if="bottom?.Internetdrugtrading"
          @click="goWeb(bottom?.Internetdrugtrading?.url)"
        >
          {{ bottom?.Internetdrugtrading?.name }}
        </div>
        <div
          class="icp"
          v-if="bottom?.publicsecurityrecordno"
          @click="goWeb(bottom?.publicsecurityrecordno?.url)"
        >
          {{ bottom?.publicsecurityrecordno?.name }}
        </div>
        <div class="icp" v-if="bottom?.icp" @click="goWeb(bottom?.icp?.url)">
          {{ bottom?.icp?.name }}
        </div>

        <img
          v-if="bottom?.brandofficialwebsite"
          class="brand"
          :src="bottom?.brandofficialwebsite?.webimage"
          @click="goWeb(bottom?.brandofficialwebsite?.url)"
        />
      </div>
      <div class="vertical-line"></div>
      <div class="right-box">
        <div class="box">
          <div class="label">
            <router-link to="/about">关于葵花</router-link> &nbsp;
            &nbsp;&nbsp;&nbsp; I &nbsp; &nbsp;&nbsp;&nbsp;<router-link
              to="/humanResourcesIndex"
              >人力资源</router-link
            >&nbsp; &nbsp;&nbsp;&nbsp; I&nbsp; &nbsp;&nbsp;&nbsp;
            <router-link to="/contact">联系我们</router-link>
          </div>
          <div class="after-sales">
            <img class="ic" src="../assets/image/footer/ic_tel.png" />
            <div class="sales-box">
              <div class="tel-box">
                <div
                  class="tel-box-name"
                  @click="goWeb(bottom?.aftersaleservicehotline?.url)"
                >
                  {{ bottom?.aftersaleservicehotline?.name }}
                </div>
                <div
                  class="tel-box-tel"
                  @click="goWeb(bottom?.fourhundred?.url)"
                >
                  {{ bottom?.fourhundred?.name }}
                </div>
              </div>
              <div class="tel-box">
                <div
                  class="tel-box-name"
                  @click="goWeb(bottom?.groupheadquartershotline?.url)"
                >
                  {{ bottom?.groupheadquartershotline?.name }}
                </div>
                <div
                  class="tel-box-tel"
                  @click="goWeb(bottom?.['fourhundredandfifty-one']?.url)"
                >
                  {{ bottom?.["fourhundredandfifty-one"]?.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="qr-box" @mouseenter="mouseenter" @mouseleave="mouseleave">
          <img class="qr" :src="qrImg" />
          <div class="app">
            <img
              class="ic"
              :src="item.logoimage"
              v-for="item in code"
              :key="item"
              @click="onQr(item)"
            />
          </div>
        </div>
        <div
          class="top-box"
          :class="{ 'top-box_active': outScreen }"
          @click="goTop"
        >
          <img class="ic" src="../assets/image/footer/ic_top.png" />
          <div class="name">回顶部</div>
        </div>
      </div>
    </div>
    <!-- 移动端 -->
    <div class="footerMobile">
      <div class="top">
        <div class="qr-box" @mouseenter="mouseenter" @mouseleave="mouseleave">
          <img class="qr" :src="qrImg" />
          <div class="app">
            <img
              class="ic"
              :src="item.logoimage"
              v-for="item in code"
              :key="item"
              @click="onQr(item)"
            />
          </div>
        </div>
        <div class="vertical-line"></div>
        <div class="right">
          <div class="title-box">
            <div
              class="name"
              @click="goWeb(bottom?.sunflowerpharmaceutical?.url)"
            >
              {{ bottom?.sunflowerpharmaceutical?.name }}
            </div>
            <div
              class="website"
              @click="goWeb(bottom?.groupofficialwebsite?.url)"
            >
              {{ bottom?.groupofficialwebsite?.name }}
            </div>
          </div>
          <div class="en" @click="goWeb(bottom?.official?.url)">
            {{ bottom?.official?.name }}
          </div>
          <div class="label">
            <router-link to="/about">关于葵花</router-link> &nbsp;
            &nbsp;&nbsp;&nbsp; I &nbsp; &nbsp;&nbsp;&nbsp;<router-link
              to="/humanResourcesIndex"
              >人力资源</router-link
            >&nbsp; &nbsp;&nbsp;&nbsp; I&nbsp; &nbsp;&nbsp;&nbsp;
            <router-link to="/contact">联系我们</router-link>
          </div>

          <div class="after-sales">
            <img class="ic" src="../assets/image/footer/ic_tel.png" />
            <div class="sales-box">
              <div class="tel-box">
                <div
                  class="sales-name"
                  @click="goWeb(bottom?.aftersaleservicehotline?.url)"
                >
                  {{ bottom?.aftersaleservicehotline?.name }}
                </div>
                <div class="sales-tel" @click="goWeb(bottom?.fourhundred?.url)">
                  {{ bottom?.fourhundred?.name }}
                </div>
              </div>
              <div class="tel-box">
                <div
                  class="sales-name"
                  @click="goWeb(bottom?.groupheadquartershotline?.url)"
                >
                  {{ bottom?.groupheadquartershotline?.name }}
                </div>
                <div
                  class="sales-tel"
                  @click="goWeb(bottom?.['fourhundredandfifty-one']?.url)"
                >
                  {{ bottom?.["fourhundredandfifty-one"]?.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="email-box" v-if="bottom?.copyright">
          <!-- <div class="email">Copyright@right kuihuayaoye.com</div> -->
          <div class="release" @click="goWeb(bottom?.copyright?.url)">
            {{ bottom?.copyright?.name }}
          </div>
        </div>
        <div
          v-if="bottom?.Internetdruginformation"
          class="number"
          @click="goWeb(bottom?.Internetdruginformation?.url)"
        >
          {{ bottom?.Internetdruginformation?.name }}
        </div>

        <div
          v-if="bottom?.Internetdrugtrading"
          class="number"
          @click="goWeb(bottom?.Internetdrugtrading?.url)"
        >
          {{ bottom?.Internetdrugtrading?.name }}
        </div>
        <div
          v-if="bottom?.['fourhundredandfifty-one']"
          class="icp"
          @click="goWeb(bottom?.['fourhundredandfifty-one']?.url)"
        >
          {{ bottom?.["fourhundredandfifty-one"]?.name }}
        </div>
        <div v-if="bottom?.icp" class="icp" @click="goWeb(bottom?.icp?.url)">
          {{ bottom?.icp?.name }}
        </div>

        <img
          v-if="bottom?.brandofficialwebsite"
          class="brand"
          :src="bottom?.brandofficialwebsite?.webimage"
          @click="goWeb(bottom?.brandofficialwebsite?.url)"
        />

        <div
          class="go-top"
          :class="{ 'go-top_active': outScreen }"
          @click="goTop"
        >
          <img class="ic" src="../assets/image/footer/ic_top.png" />
          <div class="t">回顶部</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bottom: [],
      code: [],
      qrImg: "",
      timerInterval: null,
      qrIndex: 0,
      isLoop: true,

      outScreen: false,
    };
  },

  mounted() {
    this.getData();
    this.timer();
    window.addEventListener("scroll", this.listenerScroll);
  },

  unmounted() {
    // 页面关闭（路由跳转）时清除定时器
    clearInterval(this.timerInterval);
    this.timerInterval = null;

    window.removeEventListener("scroll", this.listenerScroll);
  },

  methods: {
    async getData() {
      try {
        //获取底部数据
        const [info, code] = await Promise.all([
          this.$request.get("/bottom/getBottomInfo"),
          this.$request.get("/bottom/getBottomCode"),
        ]);

        //数据字段取数组下标
        this.bottom = info.data;
        this.code = code.data;
        this.qrImg = this.code?.[0].codeimage;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    /**
     * 监听屏幕滚动
     */
    listenerScroll() {
      this.outScreen =
        document.documentElement.scrollTop >
        document.documentElement.clientHeight / 2;
    },
    /**
     * 鼠标移动二维码事件
     */
    mouseenter() {
      this.isLoop = false;
    },

    /**
     * 移除元素
     */
    mouseleave() {
      this.isLoop = true;
    },

    /**
     * 定时器切换二维码图片
     */
    timer() {
      this.timerInterval = setInterval(() => {
        if (this.isLoop) {
          //当前下标等于数组长度 将下标设置为0 从头开始
          if (this.code.length == this.qrIndex) {
            this.qrIndex = 0;
          }
          if (this.code.length > 0) {
            this.qrImg = this.code[this.qrIndex].codeimage;
            this.qrIndex++;
          }
        }
      }, 5000);
    },

    onQr(e) {
      this.qrImg = e.codeimage;
    },

    /**
     * 跳站外链接
     */
    goWeb(url) {
      if (url) {
        window.open(url);
      }
    },
    goTop() {
      document
        .querySelector("body")
        .scrollIntoView({ behavior: "smooth", block: "start" });
      // if (document.body.clientWidth <= 1200) {
      //   document.body.scrollTop = 0;
      // } else {
      //   document.documentElement.scrollTop = 0;
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.footerMobile {
  display: none;
}

.footerPc {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/image/footer/bg.png);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 420px;
  position: relative;

  .left-box {
    white-space: normal;
    display: flex;
    flex-direction: column;

    .title-box {
      display: flex;
      align-items: center;
      height: 34px;

      .name {
        height: 34px;
        font-size: 34px;
        font-weight: bold;
        color: #ffffff;
      }

      .website {
        margin-left: 9px;
        height: 30px;
        font-size: 32px;
        color: #ffffff;
      }
    }

    .en {
      margin-top: 13px;
      font-size: 16px;
      color: #f8f8f8;
    }

    .email-box {
      margin-top: 29px;
      display: flex;
      align-items: center;
      height: 18px;

      .email {
        font-size: 18px;
        color: #f8f8f8;
      }

      .release {
        // margin-left: fn.wpx(14);
        font-size: 18px;
        color: #f8f8f8;
      }
    }

    .icp {
      margin-top: 14px;
      font-size: 18px;
      color: #f8f8f8;
    }

    .brand {
      margin-top: 14px;
      width: 80px;
      height: 30px;
      object-fit: cover;
    }

    .number {
      margin-top: 14px;
      font-size: 18px;
      color: #f8f8f8;
    }
  }

  .vertical-line {
    margin-left: 96px;
    width: 1px;
    height: 180px;
    background: #ffffff;
  }

  .right-box {
    display: flex;
    align-items: center;

    .box {
      display: flex;
      flex-direction: column;

      .label {
        margin-left: 46px;
        font-size: 19px;
        color: #f8f8f8;
      }

      .after-sales {
        margin-top: 41px;
        margin-left: 45px;
        display: flex;
        height: 56px;
        justify-content: space-between;

        align-items: center;

        .ic {
          width: 53px;
          height: 53px;
        }

        .sales-box {
          margin-left: 8px;
          display: flex;
          // background: #f00;
          flex-direction: column;
          height: 60px;
          justify-content: space-between;

          .tel-box {
            display: flex;
            height: 28px;
            align-items: center;

            .tel-box-name {
              // height: 17px;
              font-size: 18px;
              color: #f8f8f8;
            }

            .tel-box-tel {
              font-family: "微软雅黑";
              font-weight: bold;
              // height: 20px;
              font-size: 24px;
              color: #ffffff;
            }
          }
        }
      }
    }

    .qr-box {
      margin-left: 49px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 186px;
      height: 231px;
      border: 2px solid #f8f8f8;
      border-radius: 6px;

      .qr {
        box-sizing: border-box;
        overflow: hidden;
        margin-top: 12px;
        width: 170px;
        height: 170px;
      }

      .app {
        margin-top: 7px;
        width: 170px;
        display: flex;
        justify-content: space-between;

        .ic {
          width: 30px;
          height: 30px;
        }
      }
    }

    .top-box {
      opacity: 0;
      pointer-events: none;
      transition: all 250ms;
      z-index: 1001;

      position: fixed;
      bottom: 100px;
      right: 100px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 43px;
      height: 46px;
      background: #f8f8f8;
      border-radius: 4px;

      &_active {
        opacity: 1;
        pointer-events: initial;
      }

      .ic {
        width: 26px;
        height: 15px;
      }

      .name {
        font-size: 12px;
        color: #f1923e;
      }
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .footerPc {
    display: none;
  }

  .footerMobile {
    width: fn.rpx(750);
    // height: fn.rpx(386);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../assets/image/footer/m-bg.png);
    display: block;
    padding-bottom: fn.rpx(30);

    .top {
      display: flex;

      .qr-box {
        margin-top: fn.rpx(35);
        margin-left: fn.rpx(53);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: fn.rpx(186);
        height: fn.rpx(231);
        border: 2px solid #f8f8f8;
        border-radius: 6px 6px 6px 6px;

        .qr {
          box-sizing: border-box;
          overflow: hidden;
          margin-top: fn.rpx(12);
          width: fn.rpx(170);
          height: fn.rpx(170);
        }

        .app {
          margin-top: fn.rpx(7);
          width: fn.rpx(170);
          display: flex;
          justify-content: space-around;

          .ic {
            width: fn.rpx(30);
            height: fn.rpx(30);
          }
        }
      }

      .vertical-line {
        margin-top: fn.rpx(63);
        margin-left: fn.rpx(48);
        width: fn.rpx(1);
        height: fn.rpx(180);
        background: #ffffff;
      }

      .right {
        display: flex;
        flex-direction: column;
        margin-left: fn.rpx(42);
        margin-top: fn.rpx(48);

        .title-box {
          display: flex;
          align-items: center;
          height: fn.rpx(34);

          .name {
            height: fn.rpx(34);
            font-size: fn.rpx(34);
            font-weight: bold;
            color: #ffffff;
          }

          .website {
            margin-left: fn.rpx(9);
            height: fn.rpx(30);
            font-size: fn.rpx(32);
            font-weight: 300;
            color: #ffffff;
          }
        }

        .en {
          margin-top: fn.rpx(13);
          font-size: fn.rpx(16);
          font-weight: 400;
          color: #f8f8f8;
        }

        .label {
          margin-top: fn.rpx(28);

          font-size: fn.rpx(16);
          font-weight: 400;
          color: #f8f8f8;
        }

        .after-sales {
          box-sizing: border-box;
          margin-top: fn.rpx(29);

          display: flex;
          height: fn.rpx(60);

          align-items: center;

          .ic {
            width: fn.rpx(45);
            height: fn.rpx(45);
          }

          .sales-box {
            margin-left: fn.rpx(8);
            display: flex;
            flex-direction: column;
            height: fn.rpx(56);
            justify-content: center;
            // justify-content: space-between;

            .tel-box {
              display: flex;
              height: fn.rpx(30);
              // align-items: center;

              .sales-name {
                height: fn.rpx(17);
                font-size: fn.rpx(18);
                color: #f8f8f8;
              }

              .sales-tel {
                font-family: "微软雅黑";
                font-size: fn.rpx(22);
                font-weight: bold;
                color: #ffffff;
              }
            }
          }
        }
      }
    }

    .bottom {
      margin-top: fn.rpx(20);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .go-top {
        z-index: 1001;
        opacity: 0;
        pointer-events: none;
        transition: all 250ms;
        position: fixed;
        right: fn.rpx(60);
        bottom: fn.rpx(150);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        width: fn.rpx(50);
        height: fn.rpx(46);
        background: #f8f8f8;
        border-radius: fn.rpx(4);

        &_active {
          opacity: 1;
          pointer-events: initial;
        }

        .ic {
          width: fn.rpx(26);
          height: fn.rpx(15);
        }

        .t {
          font-size: fn.rpx(12);
          color: #f1923e;
        }
      }

      .email-box {
        display: flex;
        align-items: center;
        height: fn.rpx(18);

        .email {
          font-size: fn.rpx(14);
          //   font-weight: 400;
          color: #f8f8f8;
        }

        .release {
          // margin-left: fn.rpx(14);
          font-size: fn.rpx(14);
          //   font-weight: 400;
          color: #f8f8f8;
        }
      }

      .icp {
        margin-top: fn.rpx(6);
        font-size: fn.rpx(14);
        //  font-weight: 400;
        color: #f8f8f8;
      }

      .number {
        margin-top: fn.rpx(6);
        font-size: fn.rpx(14);
        //     font-weight: 400;
        color: #f8f8f8;
      }

      .brand {
        margin-top: fn.rpx(14);
        width: fn.rpx(80);
        height: fn.rpx(30);
        object-fit: cover;
      }
    }
  }
}
</style>

